import { defineComponent, Fragment, CSSProperties, ref, computed } from 'vue'
import cls from 'classnames'
import { ElDialog as Modal, ElButton as Button } from 'element-plus'
import { Form } from '@formily/core'
import { observable } from '@formily/reactive'
import { observer } from '@formily/reactive-vue'
import { usePrefix, useTheme, TextWidget } from '@pg/prototypes'
import { DataSettingPanel } from './DataSettingPanel'
import { TreePanel } from './TreePanel'
import { transformDataToValue, transformValueToData } from './shared'
import { IDataSourceItem, ITreeDataSource } from './types'
import './styles.less'

export interface IDataSourceSetterProps {
  className?: string
  style?: CSSProperties
  onChange: (dataSource: IDataSourceItem[]) => void
  value: IDataSourceItem[]
  allowTree?: boolean
  allowExtendOption?: boolean
  defaultOptionValue?: {
    label: string
    value: any
  }[]
  effects?: (form: Form<any>) => void
}

export const DataSourceSetter = observer(
  defineComponent({
    props: ['value', 'className', 'allowTree', 'allowExtendOption', 'defaultOptionValue', 'onChange', 'effects'],
    setup(props, {emit}) {
      const {
        className,
        value = [],
        onChange,
        allowTree = true,
        allowExtendOption = true,
        defaultOptionValue,
        effects = () => {},
      } = props
      const theme = useTheme()
      const prefix = usePrefix('data-source-setter')
      const modalVisible = ref(false)
      const treeDataSource = ref(transformValueToData(value))
      const current = ref()
      const openModal = () => modalVisible.value = true
      const closeModal = () => modalVisible.value = false
      return () => (
        <span>
          <Button block onClick={openModal}>
            <TextWidget token="SettingComponents.DataSourceSetter.configureDataSource" />
          </Button>
          <Modal
            v-model={modalVisible.value}
            v-slots={{
              header: () => <TextWidget token="SettingComponents.DataSourceSetter.configureDataSource"/>,
              footer: () => <div className="dialog-footer">
                <Button onClick={closeModal}>
                  <TextWidget>cancel</TextWidget>
                </Button>
                <Button type="primary" onClick={() => {
                  // onChange(treeDataSource)
                  emit('change', treeDataSource.value)
                  closeModal()
                }}>
                  <TextWidget>ok</TextWidget>
                </Button>
              </div>
            }}
            width="65%"
            bodyStyle={{padding: 10}}
            transitionName=""
            maskTransitionName=""
            onCancel={closeModal}
          >
             <div
               className={`${cls(prefix.value, className)} ${prefix.value + '-' + theme.value} ${
                 prefix.value + '-layout'
               }`}
             >
              <div className={`${prefix.value + '-layout-item left'}`}>
                <TreePanel
                  defaultOptionValue={defaultOptionValue}
                  allowTree={allowTree}
                  v-model={treeDataSource.value}
                  v-model:selectItem={current.value}
                ></TreePanel>
              </div>
              <div className={`${prefix.value + '-layout-item right'}`}>
                <DataSettingPanel
                  allowExtendOption={allowExtendOption}
                  item={current.value}
                  effects={effects}
                ></DataSettingPanel>
              </div>
            </div>
          </Modal>
        </span>
      )
    }
  })
)
